<template>
  <div class="flex items-center text-14 color-333333" :class="className">
    <p>
      <span v-if="label">{{ label }}：</span>
      <slot><LabelCopy :text="value" /></slot>
      <span v-if="type" class="mark">{{ type }}</span>
    </p>
  </div>
</template>

<script>
import LabelCopy from './label-copy.vue'

export default {
  name: 'label-normal',
  components: {
    LabelCopy
  },
  props: {
    label: {
      type: [String, Number],
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: [String, Number],
      default: ''
    },
    className: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.mark {
  background-color: #def2ff;
  margin-left: 8px;
  padding: 2px 4px;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #64b5ea;
  font-size: 12px;
  color: #418cbd;
}
</style>
